<template>
  <div>
    <div style="margin: 10px 0">
      <el-button type="primary" @click="handleAdd">新增课程</el-button>
    </div>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column fixed label="课程名" prop="courseName" sortable/>
      <el-table-column fixed label="课程编号" prop="courseNumber"/>
<!--      <el-table-column label="开课院系" prop="schoolId"/>-->
      <el-table-column label="学时" prop="coursePeriod"/>
      <el-table-column label="学分" prop="courseCredit"/>
<!--      <el-table-column label="任课教师" prop="teacherName"/>-->
      <el-table-column label="课程介绍" prop="courseDesc"/>
      <!--      <el-table-column label="上课时间" prop="schedule"/>-->
      <!--      <el-table-column label="上课地点" prop="classroom"/>-->
<!--      <el-table-column label="选课容量" prop="courseCapacity"/>-->
      <el-table-column label="可选专业" prop="majorGroup"/>
      <el-table-column fixed="right" label="操作" width="250px">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)">修改课程信息</el-button>
          <el-button type="text" @click="$router.push('/timePlace')">修改时间信息</el-button>
          <el-popconfirm title="确定删除此信息？" @confirm="handleDelete(scope.row.number)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" title="新增课程" width="40%">
      <el-form ref="form" :model="form" :rules="rules" label-position="left" label-width="80px"
               style="padding-left: 50px">
        <el-form-item label="课程名" prop="courseName">
          <el-input v-model="form.courseName" style="width: 50%"/>
        </el-form-item>
        <el-form-item label="课程编号" prop="courseNumber">
          <el-input v-model.number="form.courseNumber" style="width: 50%"/>
        </el-form-item>
        <el-form-item label="学时" prop="coursePeriod">
          <el-input v-model.number="form.coursePeriod" style="width: 50%"/>
        </el-form-item>
        <el-form-item label="学分" prop="courseCredit">
          <el-input v-model.number="form.courseCredit" style="width: 50%"/>
        </el-form-item>
        <el-form-item label="开课院系" prop="school">
          <el-select v-model="form.schoolName" filterable placeholder="请选择">
            <el-option
                v-for="item in schoolList"
                :key="item.schoolId"
                :label="item.schoolName"
                :value="item.schoolId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任课教师" prop="teacher">
          <el-select v-model="this.form.selectedTeacher" filterable multiple placeholder="请选择">
            <el-option
                v-for="item in teacherList"
                :key="item.teacherId"
                :label="item.teacherName+' '+item.teacherId"
                :value="item.teacherId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开课学年" prop="schoolYear">
          <el-select v-model="form.schoolYear" placeholder="请选择">
            <el-option
                v-for="item in YearList" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开课学期" prop="semester">
          <el-radio v-model="this.form.semester" :label="1">第一学期</el-radio>
          <el-radio v-model="this.form.semester" :label="2">第二学期</el-radio>
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input v-model="form.courseDesc" style="width: 80%" type="textarea"/>
        </el-form-item>
        <el-form-item label="选课容量" prop="capacity">
          <el-input v-model.number="form.courseCapacity" style="width: 30%"/>
        </el-form-item>
        <el-form-item label="开放范围">
          <el-radio v-model="this.form.openToAll" :label="true">通选</el-radio>
          <el-radio v-model="this.form.openToAll" :label="false">非通选</el-radio>
        </el-form-item>
        <!--            如果不选择通选，则必须选择专业。-->
        <el-form-item v-if="this.form.openToAll===false" label="可选专业">
          <el-select v-model="this.form.majorGroup" filterable multiple placeholder="请选择">
            <el-option
                v-for="item in majorOptions"
                :key="item.majorId"
                :label="item.majorName"
                :value="item.majorId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveForm">确 定</el-button>
          </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "CourseMaint",
  components: {},
  data() {
    return {
      tableData: [
        {
          name: 1
        }
      ],
      dialogVisible: false,
      rules: {
        courseName: [{required: true, message: '请输入课程名', trigger: 'blur'},],
        courseNumber: [{required: true, message: '请输入课程编号', trigger: 'blur'},
          {type: 'number', message: '课程编号应为数字'}],
        coursePeriod: [{required: true, message: '请输入学时', trigger: 'blur'}, {type: 'number', message: '学时应为数字'}],
        courseCredit: [{required: true, message: '请输入学分', trigger: 'blur'}, {type: 'number', message: '学分应为数字'}],
        school: [{required: true, message: '请选择开课院系', trigger: 'blur'}],
        teacher: [{required: true, message: '请选择任课教师', trigger: 'blur'}],
        schoolYear: [{required: true, message: '请选择学年', trigger: 'blur'}],
        semester: [{required: true, message: '请选择学期', trigger: 'blur'}],
        capacity: [{required: true, message: '请填写选课容量', trigger: 'blur'}, {type: 'number', message: '选课容量应为数字'}]
      },
      form: {
        school: null,
        teacher: null,
        description: null,
        capacity: null,
        name: null,
        number: null,
        hour: null,
        credit: null,
      },
    }
  },
  created() {
    this.load()
  },
  methods: {
    load(){
      request.get("http://124.70.179.188:8082/major/majorList").then(res=>{
        this.majorGroup = res.data
      })
    },
    handleAdd() {
      this.dialogVisible = true
      this.load()
      this.form = {
        school: null,
        selectedTeacher: [],
        majorOptions:[],
        description: null,
        capacity: null,
        name: null,
        number: null,
        hour: null,
        credit: null,
        openToAll: true,
        schoolYear: 2022,
        semester: 1,
        majorGroup: [],
        timeAndPlaces: []
      }
    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true
    },
    handleDelete(id) {
      request.delete("http://124.70.179.188:8082/course/" + id).then(res => {
        if (res.code === '200') {
          this.$message.success("删除成功")
          this.load()
        } else {
          this.$message.error("删除失败")
        }
      })
    },
    saveForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) { //若id存在则更新数据（编辑），若id不存在则新增数据
            request.put("http://124.70.179.188:8082/course/add", this.form).then(res => {
              // 判断是否返回成功，若失败给出失败的信息
              if (res.code === '0') {
                this.$message({
                  type: "success",
                  message: "更新成功"
                })
              } else {
                this.$message({
                  type: "error",
                  message: res.message
                })
              }
              this.load() // 刷新表格数据
              this.dialogVisible = false // 关闭弹窗
            })
          } else {
            request.post("http://124.70.179.188:8082/course/add", this.form).then(res => {
              console.log(res)
              // 判断是否返回成功，若失败给出失败的信息
              if (res.code === '0') {
                this.$message({
                  type: "success",
                  message: "新增成功"
                })
              } else {
                this.$message({
                  type: "error",
                  message: res.message
                })
              }
              this.load() // 刷新表格数据
              this.dialogVisible = false // 关闭弹窗
            })
          }
        }
      })

    },

  }
}
</script>

<style scoped>

</style>